<%@ include file="/WEB-INF/jsp/common/IncludeTop.jsp"%>
<%@page pageEncoding="UTF-8"%>
<link rel="stylesheet" href="jquery-ui/jquery-ui.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="jquery-ui/jquery-ui.structure.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="datatable/media/css/dataTables.bootstrap.css" type="text/css">
<script type="text/javascript" src="datatable/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatable/media/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="jquery.bootpag.min.js"></script>
<c:if test="${not empty message}">
  <div class="message green">${message}</div>
</c:if>
<div class="container-fluid">
  <div class="col-lg-0 col-lg-offset-0">
    <div class="panel-group" id="accordion">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">
            <spring:message code="label.users" />
          </h3>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">
            <div style="margin: 0 auto">
              <form:form id="customerForm" action="getCustomerList.web" method="get"
                class="form-horizontal" modelAttribute="customer"
              >
                <fieldset>
                  <div class="form-group">
                    <label for="customercodeInput" class="col-lg-2 control-label"><spring:message
                        code="label.customercode"
                      /></label>
                    <div class="col-lg-2">
                      <form:input type="text" class="form-control input-sm" path="customerCd"
                        id="customercodeInput" name="customercodeInput" placeholder=""
                      />
                      <form:errors path="customerCd" cssClass="error" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="customernameInput" class="col-lg-2 control-label"><spring:message
                        code="label.customername"
                      /></label>
                    <div class="col-lg-5">
                      <form:input type="text" class="form-control input-sm" path="customerNm"
                        id="customernameInput" name="customernameInput" placeholder=""
                      />
                      <form:errors path="customerNm" cssClass="error" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="customerNmAbbInput" class="col-lg-2 control-label"><spring:message
                        code="label.nameadd"
                      /></label>
                    <div class="col-lg-5">
                      <form:input type="text" class="form-control input-sm" path="customerNmAbb"
                        id="customerNmAbbInput" name="customerNmAbbInput" placeholder=""
                      />
                      <form:errors path="customerNmAbb" cssClass="error" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="sequenceInput" class="col-lg-2 control-label"><spring:message
                        code="label.sequence"
                      /></label>
                    <div class="col-lg-1">
                      <form:input type="text" class="form-control input-sm" path="customerDispSeq"
                        id="sequenceInput" name="sequenceInput" placeholder=""
                      />
                      <form:errors path="customerDispSeq" cssClass="error" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="depthInput" class="col-lg-2 control-label"><spring:message
                        code="label.depth"
                      /></label>
                    <div class="col-lg-1">
                      <form:input type="text" class="form-control input-sm" path="orgLayerNo"
                        id="depthInput" name="depthInput" placeholder=""
                      />
                      <form:errors path="orgLayerNo" cssClass="error" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="startdateInput" class="col-lg-2 control-label"><spring:message
                        code="label.startdate"
                      /></label>
                    <div class="col-lg-3">
                      <form:input type="text" class="form-control input-sm" path="tradeStartDay"
                        id="startdateInput" name="startdateInput" placeholder=""
                      />
                      <form:errors path="tradeStartDay" cssClass="error" />
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="enddateInput" class="col-lg-2 control-label"><spring:message
                        code="label.enddate"
                      /></label>
                    <div class="col-lg-3">
                      <form:input type="text" class="form-control input-sm" path="tradeEndDay"
                        id="enddateInput" name="enddateInput" placeholder=""
                      />
                      <form:errors path="tradeEndDay" cssClass="error" />
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-lg-10 col-lg-offset-2">
                      <button type="reset" class="btn btn-default">
                        <spring:message code="label.clear" />
                      </button>
                      <button type="submit" class="btn btn-primary" id="submitCustomer">
                        <spring:message code="label.search" />
                      </button>
                    </div>
                  </div>
                </fieldset>
              </form:form>
            </div>
          </div>
        </div>
      </div>
      <div class="panel panel-primary">
        <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">
            <div style="margin: 0 auto">
              <table id="example" class="table display table-striped table-hover "
                style="width: 100%"
              >
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Phone</th>
                    <th>Start Date</th>
                    <th>Salary</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
	$('#customerForm').submit(function(e) {
	 	// 操作対象のフォーム要素を取得
	    var frm = $('#customerForm');
		// HTMLでの送信をキャンセル
		e.preventDefault();

		var str = $("#customerForm").serialize();
	    var data = {}
	    var Form = this;
        // 送信ボタンを取得
        var $button = $('#submitCustomer');
        
	    //Gather Data also remove undefined keys(buttons)
	    $.each(this, function(i, v){
	            var input = $(v);
	        data[input.attr("name")] = input.val();
	        delete data["undefined"];
	    });
	    
    $.ajax({
        contentType : 'application/json; charset=utf-8',
        type: frm.attr('method'),
        url: frm.attr('action'),
        dataType : 'json',
        data : JSON.stringify(data),
        
        // 送信前
        beforeSend : function(xhr, settings) {
            // ボタンを無効化し、二重送信を防止
            $button.attr('disabled', true);
            console.log('送信前');
        },
        // 応答後
        complete : function(xhr, textStatus) {
            // ボタンを有効化し、再送信を許可
            $button.attr('disabled', false);
            console.log('送信後');
        },
        success : function(data){
            jQuery.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings) {
                return {
                    "iStart" : oSettings._iDisplayStart,
                    "iEnd" : oSettings.fnDisplayEnd(),
                    "iLength" : oSettings._iDisplayLength,
                    "iTotal" : oSettings.fnRecordsTotal(),
                    "iFilteredTotal" : oSettings.fnRecordsDisplay(),
                    "iPage" : oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings._iDisplayStart
                            / oSettings._iDisplayLength),
                    "iTotalPages" : oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings
                            .fnRecordsDisplay()
                            / oSettings._iDisplayLength)
                };
            };
			console.log("ajax success: " + data);
                $("#example").dataTable({
                    "bProcessing" : true,
                    //"bServerSide" : true,
                    "sort" : "position",
                    //bStateSave variable you can use to save state on client cookies: set value "true" 
                    "bStateSave" : false,
                    //Default: Page display length
                    "iDisplayLength" : 10,
                    //We will use below variable to track page number on server side(For more information visit: http://legacy.datatables.net/usage/options#iDisplayStart)
                    "iDisplayStart" : 0,
                    "fnDrawCallback" : function() {
                        //Get page numer on client. Please note: number start from 0 So
                        //for the first page you will see 0 second page 1 third page 2...
                        //Un-comment below alert to see page number
                        //alert("Current page number: "+this.fnPagingInfo().iPage);    
                    },
                    data : data,
                    "columns" : [
                            {
                                "mData" : "name"
                            }, {
                                "mData" : "position"
                            }, {
                                "mData" : "office"
                            }, {
                                "mData" : "phone"
                            }, {
                                "mData" : "start_date"
                            }, {
                                "mData" : "salary"
                            },

                    ]
                });

        },
        error : function(){
            $(this).html("Error!");
        }
    });
	});
});

</script>
<!-- <script type="text/javascript">
    //Plug-in to fetch page data 
    jQuery.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings) {
        return {
            "iStart" : oSettings._iDisplayStart,
            "iEnd" : oSettings.fnDisplayEnd(),
            "iLength" : oSettings._iDisplayLength,
            "iTotal" : oSettings.fnRecordsTotal(),
            "iFilteredTotal" : oSettings.fnRecordsDisplay(),
            "iPage" : oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings._iDisplayStart
                    / oSettings._iDisplayLength),
            "iTotalPages" : oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings
                    .fnRecordsDisplay()
                    / oSettings._iDisplayLength)
        };
    };

    function createTable(data) {
        //$(document).ready(function() {
        
        $("#example").dataTable({
            "bProcessing" : true,
            "bServerSide" : true,
            "sort" : "position",
            //bStateSave variable you can use to save state on client cookies: set value "true" 
            "bStateSave" : false,
            //Default: Page display length
            "iDisplayLength" : 10,
            //We will use below variable to track page number on server side(For more information visit: http://legacy.datatables.net/usage/options#iDisplayStart)
            "iDisplayStart" : 0,
            "fnDrawCallback" : function() {
                //Get page numer on client. Please note: number start from 0 So
                //for the first page you will see 0 second page 1 third page 2...
                //Un-comment below alert to see page number
                //alert("Current page number: "+this.fnPagingInfo().iPage);    
            },
            "sAjaxSource" : "getCustomerList.web",
            "aoColumns" : [
                    {
                        "mData" : "name"
                    }, {
                        "mData" : "position"
                    }, {
                        "mData" : "office"
                    }, {
                        "mData" : "phone"
                    }, {
                        "mData" : "start_date"
                    }, {
                        "mData" : "salary"
                    },

            ]
        });

    };
</script> -->
<%@ include file="/WEB-INF/jsp/common/IncludeBottom.jsp"%>